/**
 * 用来获取目标组件的样式，用于属性列表
 */
interface State {
  aimDom: {
    style?: { [organName: string]: string };
    context?: { value: string; type: string };
    faPosition?: { top: number; left: number };
    [organName: string]: any;
  }; //目标DOM节点
  aimPath: {}[]; //目标路径
  aimAttrs: {
    context?: string;
    goto?: { type: string; value: string };
    [organName: string]: any;
  }; //目标属性
  aimBox: {} | null; //目标容器
  aimXY: {} | null; //鼠标与组件的偏移
  componentList: {};
  seniorBoxList: {};
  //为了可以显示margin...
  colorDomStyle: {
    width: string;
    height: string;
    top: string;
    left: string;
    padding: string;
    border: string;
    margin: string;
  };
  judgeColorDom: boolean;
  domStack: {}[]; //存储栈
  domStackNum: number; //存储栈控制下标
  page?: {
    tree: {
      [organName: string]: [];
    };
  };
}

export default function checkDomAttrs(
  state: State,
  {
    e,
    that,
  }: {
    e: { path: { className: string; getAttribute: Function }[] };
    that: { pageName: string };
  }
) {
  let aimDom: {
    style?: { [organName: string]: string };
    context?: { value: string; type: string };
    faPosition?: { top: number; left: number };
    [organName: string]: any;
  };

  //组件名
  let type: string;
  //组件样式
  let style: { [organName: string]: string };
  //组件属性
  let aimAttrsDemo: {
    colWidth: string[];
    [organName: string]: string | {};
  };
  //组件的路径，用于删除组件或栈
  let sPath: {}[];

  // 判断有没有目标组件
  if (Object.keys(state.aimDom).length == 0) return;

  aimDom = state.aimDom;
  type = aimDom.attrs["data-type"];
  style = aimDom.style ?? {};
  aimAttrsDemo = { colWidth: [] };
  sPath = [];

  //margin
  if (
    [
      "fixedBox",
      "text",
      "button",
      "img",
      "freeBox",
      "colBox",
      "seniorBox",
    ].includes(type)
  ) {
    if (style.margin) {
      let m = style.margin.split("px ");
      aimAttrsDemo.margin = {
        top: m[0],
        right: m[1],
        bottom: m[2],
        left: m[3].slice(0, -2),
      };
    } else {
      aimAttrsDemo.margin = {
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
      };
    }
  }

  //padding
  if (
    [
      "fixedBox",
      "text",
      "button",
      "freeBox",
      "colBox",
      "colBoxItem",
      "seniorBox",
      "seniorBoxItem",
      "navMenu",
    ].includes(type)
  ) {
    if (style.padding) {
      let p = style.padding.split("px ");
      aimAttrsDemo.padding = {
        top: p[0],
        right: p[1],
        bottom: p[2],
        left: p[3].slice(0, -2),
      };
    } else {
      aimAttrsDemo.padding = {
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
      };
    }
  }

  //width
  if (["button", "text", "img", "freeBox"].includes(type)) {
    if (style.width) {
      aimAttrsDemo.width = parseInt(style.width.slice(0, -2));
    } else {
      // 查找目标Dom
      let dom = document
        .getElementsByClassName("app")[0]
        .querySelector(
          `.${aimDom.attrs.class.replace(/ /g, ".")}`
        ) as HTMLElement;
      aimAttrsDemo.width = dom.offsetWidth;
    }
  }

  //height
  if (
    [
      "button",
      "text",
      "img",
      "freeBox",
      "colBox",
      "fixedBox",
      "seniorBox",
    ].includes(type)
  ) {
    if (style.height) {
      aimAttrsDemo.height = parseInt(style.height.slice(0, -2));
    } else {
      let dom = document
        .getElementsByClassName("app")[0]
        .querySelector(
          `.${aimDom.attrs.class.replace(/ /g, ".")}`
        ) as HTMLElement;
      aimAttrsDemo.height = dom.offsetHeight;
    }
  }

  //color
  if (["button", "text", "navMenuItem", "navMenuSub"].includes(type)) {
    aimAttrsDemo.color = style.color ? style.color : "rgb(0, 0, 0)";
  }

  //fontWeight fontSize
  if (["button", "text", "navMenuItem", "navMenuSub"].includes(type)) {
    aimAttrsDemo.fontWeight = style.fontWeight ? style.fontWeight : "500";
    aimAttrsDemo.fontSize = style.fontSize
      ? parseInt(style.fontSize.slice(0, -2))
      : "20";
  }

  //borderRadius
  if (
    ["button", "img", "freeBox", "colBoxItem", "seniorBoxItem"].includes(type)
  ) {
    aimAttrsDemo.borderRadius = style.borderRadius
      ? parseInt(style.borderRadius.slice(0, -2))
      : "0";
  }

  //opacity
  if (["button", "text", "img", "freeBox"].includes(type)) {
    aimAttrsDemo.opacity = style.opacity ? style.opacity : "1";
  }

  //backgroundColor
  if (
    [
      "button",
      "text",
      "fixedBox",
      "freeBox",
      "colBox",
      "colBoxItem",
      "seniorBox",
      "seniorBoxItem",
      "navMenu",
      "navMenuItem",
      "navMenuSub",
      "carousel",
    ].includes(type)
  ) {
    aimAttrsDemo.backgroundColor = style.backgroundColor
      ? style.backgroundColor
      : "rgb(255, 255, 255)";
  }

  //border
  if (["button", "freeBox"].includes(type)) {
    aimAttrsDemo.border = {
      color: style.borderColor ? style.borderColor : "rgb(0, 0, 0)",
      width: style.borderWidth ? parseInt(style.borderWidth.slice(0, -2)) : "0",
    };
  }

  //boxShadow
  if (
    [
      "button",
      "img",
      "freeBox",
      "colBox",
      "colBoxItem",
      "seniorBox",
      "seniorBoxItem",
    ].includes(type)
  ) {
    if (style.boxShadow) {
      let bs = style.boxShadow.split("px ");
      aimAttrsDemo.boxShadow = {
        hShadow: bs[0],
        vShadow: bs[1],
        blur: bs[2],
        spread: bs[3],
        color: bs[4],
      };
    } else {
      aimAttrsDemo.boxShadow = {
        hShadow: "0",
        vShadow: "0",
        blur: "0",
        spread: "0",
        color: "#fff",
      };
    }
  }

  //context
  if (["button", "text", "navMenuItem"].includes(type)) {
    // 目前只有这个
    if (aimDom.context && aimDom.context.type == "string") {
      aimAttrsDemo.context = aimDom.context.value;
    }
  }

  //image
  if (["img"].includes(type)) {
    aimAttrsDemo.imageUrl = true;
  }

  //position
  if (["freeBox"].includes(type)) {
    aimAttrsDemo.position = style.position;
  }

  //flex  justify-content
  // if (["navMenu"].includes(type)) {
  //   aimAttrsDemo.justifyContent = aimDom.style.justifyContent;
  // }

  //页面跳转
  if (["button", "text"].includes(type)) {
    aimAttrsDemo.goto = {
      type: aimDom.goto.type,
      value: aimDom.goto.value,
    };
  }

  //多列组件宽度
  if (["colBox"].includes(type)) {
    aimAttrsDemo.colWidth = [];
    aimDom.children.forEach((item: any) => {
      aimAttrsDemo.colWidth.push(item.style.width.slice(0, -1));
    });
  }

  function clearChildren(arr: []) {
    return arr.map((item: any) => {
      if (item.attrs["data-type"] == "seniorBoxItemList") {
        item.children = clearChildren(item.children);
        return item;
      } else if (item.attrs["data-type"] == "seniorBoxItem") {
        item.children = [];
        return item;
      }
    });
  }

  //高级容器
  if (["seniorBox"].includes(type)) {
    let size: any[] = [];
    (function searchWidth(arr, fa) {
      arr.forEach((item: any) => {
        if (item.attrs["data-type"] == "seniorBoxItem") {
          if (item.style.width) {
            size[item.attrs.class[item.attrs.class.length - 1]] = {
              height: fa,
              width: item.style.width.slice(0, -1),
            };
          } else {
            size[item.attrs.class[item.attrs.class.length - 1]] = {
              width: fa,
              height: item.style.height.slice(0, -1),
            };
          }
        } else {
          searchWidth(
            item.children,
            item.style.width
              ? item.style.width.slice(0, -1)
              : item.style.height.slice(0, -1)
          );
        }
      });
    })(aimDom.children, "100");

    aimAttrsDemo.seniorBoxSize = {
      size,
      dom: clearChildren(JSON.parse(JSON.stringify(aimDom.children))),
    };
  }

  //导航菜单控制
  // if (["navMenu"].includes(type)) {
  //   aimAttrsDemo.navMenuList = { type: "navMenu", value: [] };
  //   aimDom.children.forEach((item) => {
  //     aimAttrsDemo.navMenuList.value.push(item.attrs.class);
  //   });
  // }

  // if (["navMenuSub"].includes(type)) {
  //   aimAttrsDemo.navMenuList = { type: "navMenuSub", value: [] };
  //   aimDom.children.forEach((item) => {
  //     aimAttrsDemo.navMenuList.value.push(item.context.value);
  //   });
  // }

  //轮播图
  // if (["carousel"].includes(type)) {
  //   let imgList = [];
  //   aimDom.children.forEach((item) => {
  //     imgList.push(item.children[0].attrs.src);
  //   });
  //   aimAttrsDemo.carousel = {
  //     height: aimDom.attrs.height,
  //     type: aimDom.attrs.type,
  //     imgList,
  //   };
  // }

  //容器位置
  if (
    ["fixedBox", "colBox", "seniorBox", "navMenu", "carousel"].includes(type)
  ) {
    if (state.page) {
      aimAttrsDemo.sort = state.page.tree[that.pageName].findIndex(
        (item: any) => {
          return item.attrs.class == aimDom.attrs.class;
        }
      );
    }
  }

  //删除组件
  if (
    [
      "button",
      "text",
      "img",
      "fixedBox",
      "freeBox",
      "colBox",
      "seniorBox",
      "carousel",
      "navMenu",
    ].includes(type)
  ) {
    aimAttrsDemo.canDelete = true;
  }

  // 记录目标组件路径
  e.path
    .slice(0, -6)
    .reverse()
    .forEach((element) => {
      let dataType = element.getAttribute("data-type");
      // 有一些是不用配置的
      if (["carouselItem", "carouselItemImage"].includes(dataType)) return;
      // 不是自定义组件也不用管
      if (dataType) {
        sPath.push({
          className: element.className,
        });
      }
      // if (!["el-submenu__title"].includes(element.className))
      //   sPath.push({
      //     className: element.className,
      //   });
    });
  state.aimPath = sPath; //组件的路径，用于删除组件或栈
  state.aimAttrs = aimAttrsDemo;
}
